<template>
    <div class="courseParticulars" v-if="showComment" id="courseParticulars">
      <!-- <div :style="showCommentVideo?'height:100%;overflow:hidden': ''"> -->
        <div class="courseTopic" id="courseTopic"  @touchstart="operateTextField">
          <div class="topicHeader">
            <div class="topicTitle">【Day {{courseData.section_number}}】{{courseData.section_name}}</div>
            <div class="topTime">{{courseTime}}</div>
          </div>
          <div class="topicContent">
            <div class="topicCell" v-for="(item, index) in courseData.section_content" :key="index">
              <div class="cellText" v-if="item.status === 0">
                <div class="textTitle" v-if="item.name">{{item.name}}</div>
                <!-- <div class="textContent">{{item.content}}</div> -->
                <div class="textContent">
                  <P v-for="(itemText, indexText) in item.cache" :key="indexText">{{itemText}}</P>
                </div>
              </div>

              <div class="cellImage" v-if="item.status === 1">
                <!-- <div class="imageTitle">【{{item.name}}】</div> -->
                <div class="imageTitle">{{item.name}}</div>
                <div class="imageContent" @click="previewImageList(item, courseData.section_content)">
                  <img :src="item.content" lazy-load  mode="widthFix">
                </div>
              </div>

              <div class="cellAudio" v-if="item.status === 2">
                <!-- <div class="audioTitle">【{{item.name}}】</div> -->
                <div class="audioTitle">{{item.name}}</div>
                <div class="audioContent">
                  <!-- {{item.content}} -->
                  <!-- <audio :name="item.name" :src="item.content" :controls="true"></audio> -->
                  <!-- <audioModule :audioSrc="item.content" :title="item.name" :playState="item.play" @audioeNotice="audioeNotice"></audioModule> -->
                  <audioModule :audioData="item" @audioeNotice="audioeNotice" v-if="item"></audioModule>
                </div>
              </div>

              <div class="cellVideo" v-if="item.status === 3">
                <!-- <div class="videoTitle">【{{item.name}}】</div> -->
                <div class="videoTitle">{{item.name}}</div>
                <div class="videoContent">
                  <!-- {{item.content}} -->
                  <!-- <video :src="item.content" @ended="endVideo" controls></video> -->
                  <videoModule :videoId="'tVideo-'+index" :videoData="item" @videoMeans="videoMeans" v-if="item"></videoModule>
                  <!-- <video :id="'tVideo-'+index"  :src="item.content" @play.stop.prevent="playTVideo(item, ('tVideo-'+index))" controls objectFit="fill"></video> -->
                </div>
              </div>

              <div class="cellTask" v-if="item.status === 4">
                <div class="taskTitle">【作业】</div>
                <!-- <div class="taskContent">{{item.content}}</div> -->
                <div class="taskContent">
                  <p v-for="(itemTask, indexTask) in item.cache" :key="indexTask">{{itemTask}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="courseComment" v-if="showComment && commentData && courseData">
          <commentModule :commentData="commentData" :jobBtnFlag="courseData.section_job" :hiddenInput="hiddenInput"  @audioeNotice="audioeNotice" @commentNotice="commentNotice" @commentVideo="commentVideo" @commentShare="commentShare" @textFieldNotice="textFieldNotice"></commentModule>
        </div>

        <div class="courseLoading" v-if="showLoading">加载更多...</div>
      <!-- </div> -->
        <!-- <div class="commentVideo" v-if="showCommentVideo" @touchmove.stop.prevent="stopTouchmove">
          <div class="videoMask" @click.stop.prevent="showCommentVideo = false"></div>
          <div class="videoBox">
            <video :src="commentVideoItem.url" controls></video>
          </div>
        </div> -->

        <!-- <cover-view class="shareModel" v-if="showShareModel">
          <cover-view class="shareMask" @click.stop.prevent="showShareModel = !showShareModel"></cover-view>
          <cover-view class="shareContent">
            <button open-type="share">
              <cover-image class="shareFriend" src="https://mobuz-bs.gz.bcebos.com/course/type/banner/Ubff2a.jpg" lazy-load />
            </button>
            <button open-type="contact" session-from="weapp">分享朋友圈</button>
          </cover-view>
      </cover-view> -->
    </div>
</template>

<script>
import {obtainCourseParticulars, amendCourseParticulars, obtainCommmentList} from '@/config/api'
import {dateRegExp, commentRegExp} from '@/config/mUtils'
import {showMessager, showPictureCard} from '@/config/wUtils'
import commentModule from '@/components/comment'
import videoModule from '@/components/video'
import audioModule from '@/components/audio'

export default {
  components:{
    commentModule,
    videoModule,
    audioModule
  },
  data () {
    return {
    //   // 用户信息
    //   userInfo: [],
    // 课程数据
    courseData: [],
    // 课程时间
    courseTime: '',
    // // 课程内容
    // courseMatter: [],
    // 显示评论
    showComment: false,
    // 显示加载更多
    showLoading: false,

    // 评论数据
    commentData: [],
    // 当前页面
    currentPage: 0,

    // 评论视频 对象
    commentVideoItem: {},
    // 显示 评论视频
    showCommentVideo: false,

    // 评论 不满10条时 每页的条数
    commentRow: null,
    // 评论 总条数
    commentAllRow: null,

    // 评论列表 加锁
    commentLock: false,
    // 显示 分享model
    showShareModel: false,
    // 分享 数据
    shareData: [],

    // 隐藏输入框
    hiddenInput: false,



    //   // 课程状态 （0 还没开始/ 1 进行中/ 2 已经结束）
    //   courseStatus: null,
    //   // 课程天数
    //   courseDay: 0
    }
  },
  // created () {
  //   let self = this;
  //   console.log(self.courseData, '.............created')
  // },
  mounted () {
    let self = this
    // 初始化 课程详情界面
    self.initCourseParticulars();



    // // 本地用户信息
    // self.userInfo = wx.getStorageSync('userInfo')
    // console.log(self.userInfo, '.....self.userInfo')
    // if (JSON.stringify(self.userInfo) != '[]') {
    //   // 获取 今日课程 数据
    //   self.acquireDengesCourseData()
    // }
  },
  methods: {
    // 初始化 课程详情界面
    initCourseParticulars(){
        let self = this;
        console.log(self.$root.$mp.query, '......this.$root.$mp.query')
        if(self.$root.$mp.query.section_id && self.$root.$mp.query.batch_id){
          // 当前页面
          self.currentPage = 1
          // 显示 分享model
          self.showShareModel= false
          // 隐藏转发按钮
          wx.hideShareMenu()
          // 获取 课程详情 数据
          self.acquireCourseParticularsData()
          // 获取 评论列表 数据
          self.acquireCommmentListData()
        }
    },
    // 初始化 多媒体
    initMultimedia(){
      let self = this;
      // 帖子 多媒体
      if (self.courseData.section_content) {
        self.courseData.section_content.forEach((itemCourse, indexCourse) => {
          itemCourse.play = 0
        })
      }
      // 评论 多媒体
      if (self.commentData) {
        self.commentData.forEach((itemComment, indexComment) => {
          itemComment.content.forEach((itemContent, indexContent) => {
            if (itemContent.status === 1) {
              itemContent.content.forEach((itemMedia, indexMedia) => {
                if (itemMedia.status === 10) {
                  itemMedia.play = 0
                }
              } )
            }
            if(itemContent.status === 2){
              itemContent.play = 0
            }
          })  
        })
      }
    },
    // 获取 课程详情 数据
    async acquireCourseParticularsData () {
      let self = this
      // 显示评论
      self.showComment = false
      wx.showNavigationBarLoading()
      let courseInfo = await obtainCourseParticulars(self.$root.$mp.query.section_id, self.$root.$mp.query.batch_id)
      if (courseInfo) {
        // 课程数据
        self.courseData = courseInfo.data
        // 课程时间
        self.courseTime = dateRegExp (((self.courseData.start_time - 0) + (self.courseData.section_day - 0 - 1)*24*60*60*1000), 'yyyy年MM月dd日')
        // 课程内容
        // self.courseMatter = JSON.parse(self.courseData.section_content)
        // self.courseMatter = self.courseData.section_content
        // // 课程状态 （0 还没开始/ 1 进行中/ 2 已经结束）
        // self.courseStatus = courseInfo.data.status
        // // 课程天数
        // self.courseDay = courseInfo.data.day

        // 显示评论
        self.showComment = true
      }
      console.log(courseInfo, '....课程详情')
      wx.hideNavigationBarLoading()
      wx.stopPullDownRefresh()
    },
    // 获取 评论列表 数据
    async acquireCommmentListData () {
      let self = this;
      wx.showNavigationBarLoading()
      
      console.log(self.$root.$mp.query.section_id, '....获取 评论列表 数据 .section_id')
      let commmentInfo = await obtainCommmentList(self.$root.$mp.query.batch_id, self.$root.$mp.query.section_id, self.currentPage)
      if (commmentInfo.status === 200) {
          // 评论数据
          self.commentData = commmentInfo.data
          self.commentData.forEach((item, index) => {
            // 评论时间
            item.create_time = commentRegExp ((item.create_time-0))
          })

          console.log(self.commentRow, self.commentAllRow, self.commentData.length, '..................................')
          
          if(JSON.stringify(self.commentData) !== '[]' && self.commentData.length%10 === 0){
            if (self.commentAllRow === self.commentData.length) {
              // 显示加载更多
              self.showLoading = false
              showMessager('没有更多~')
              return
            }
            // 显示加载更多
            self.showLoading = true
            // // 评论列表 加锁
            // self.commentLock = false
            // 当前页面
            self.currentPage ++
          }else{
            // 显示加载更多
            self.showLoading = false
            //         
            // 评论 不满10条时 每页的条数
            if (self.commentRow) {
              if (self.commentRow !== self.commentData.length%10 ){
                
              }else{
                // 上拉刷新时  才判断是否加载列表
                // 评论列表 加锁
                if (self.commentLock) {
                  // 评论列表 加锁  && !self.commentLock
                  showMessager('没有更多~')
                }
                
              }
            }
          }
      }
      console.log(self.currentPage, commmentInfo, '....评论列表')
      // 评论列表 加锁
      self.commentLock = false
      wx.hideNavigationBarLoading()
    },
    // video组件 触发的方法
    async videoMeans (item) {
      let self = this;
      // 初始化 多媒体
      self.initMultimedia()
      item.play = 1
      console.log(item, '..........video组件 触发的方法')
      let class_time = (self.courseData.start_time - 0) + (self.courseData.section_day - 0 - 1)*24*60*60*1000
      const courseState = await amendCourseParticulars(
        wx.getStorageSync('student_id'),
        self.$root.$mp.query.batch_id,
        self.$root.$mp.query.section_id,
        JSON.stringify(item),
        class_time
      )
      console.log(courseState, '..........courseState')
      if (courseState.status === 200){
        wx.setStorageSync('plan_state', 1)
      }
    },
    // audio组件 触发的方法
    audioeNotice (item) {
      let self = this;
      if (!item.play) {
        // 初始化 多媒体
        self.initMultimedia()
        item.play = 1
      } else {
        // 初始化 多媒体
        self.initMultimedia()
      }
      // console.log(item, '.........audio组件 触发的方法')
    },
    // comment组件 触发的方法
    commentNotice () {
      let self = this;
      // 获取 评论列表 数据
      self.acquireCommmentListData()
    },
    // comment组件 触发的分享方法
    commentShare (item) {
      let self = this;
      // 显示 分享model
      self.showShareModel = true
      // 分享 数据
      self.shareData = item
      console.log(item, '...............comment组件 触发的分享方法')
    },
    // 播放 comment组件 视频
    commentVideo (item) {
      let self = this;
      // 初始化 多媒体
      self.initMultimedia()
      if (item) {
        wx.navigateTo({
          url: '../commentVideo/main?comment_video='+item.url
        })
      }
      // // 显示 评论视频
      // self.showCommentVideo = true 
      // // 评论视频 对象
      // self.commentVideoItem = item
      // console.log('播放 comment组件 视频', item)
    },
    stopTouchmove() {
      let self = this;
      // 显示 评论视频
      self.showCommentVideo = false
      console.log('禁止 滚动')
    },
    // 展示 图片列表
    previewImageList(item, itemList) {
      let self = this;
      if (item.status === 1){
        let imageList = []
        itemList.forEach( (itemCell, index) => {
          console.log(itemCell, '......展示图片列表')
          if (itemCell.status === 1) {
            imageList.push(itemCell.content)
          }
        });
        showPictureCard(item.content, imageList)
      }
    },
    // playTVideo(item, id){
    //   let self = this;
    //   // 初始化 多媒体
    //   self.initMultimedia()
    //   console.log(self.courseData, '..........................帖子视频播放')
    //   console.log(self.commentData, '..........................评论视频播放')
    // },
    // 操作 作业列表的输入框
    operateTextField() {
      let self = this;
      console.log('操作`作业列表的输入框')
      self.hiddenInput = Math.ceil(Math.random() * 61)
    },
    // 隐藏 作业列表的输入框
    textFieldNotice() {
      let self = this;
      console.log('隐藏 作业列表的输入框')
      self.hiddenInput = false
    }
  },
  // 下拉刷新
  onPullDownRefresh () {
    let self = this
    // 初始化 多媒体
    self.initMultimedia()
    // 初始化 课程详情界面
    self.initCourseParticulars();
  },
  // 上拉加载
  onReachBottom () {
    console.log('上拉加载')
    let self = this;
    // 初始化 多媒体
    self.initMultimedia()
    // 显示评论   不显示分享弹窗
    if (self.showComment && !self.showShareModel) {
      // console.log(self.commentData.length%10, '....self.commentData.length%10')

      if(JSON.stringify(self.commentData) !== '[]' && self.commentData.length%10 !== 0) {
        // 评论 不满10条时 每页的条数
        self.commentRow = self.commentData.length % 10
        console.log(self.commentRow, '........self.commentRow')
      }

      // 上拉刷新时  才判断是否加载列表
      // 评论列表 加锁
      self.commentLock = true

      // 评论 总条数
      self.commentAllRow = self.commentData.length
      // 获取 评论列表 数据
      self.acquireCommmentListData()

      // if(self.commentData.length%10 === 0){
      //   // 获取 评论列表 数据
      //   self.acquireCommmentListData()
      // }else{
      //   // 评论 不满10条时 每页的条数
      //   if (self.commentRow) {
      //     if (self.commentRow !== self.commentData.length%10 ){
      //       // 获取 评论列表 数据
      //       self.acquireCommmentListData()
      //     }else{
      //       showMessager('没有更多~')
      //     }
      //   }
      // }
    }
  },
  // 切换界面
  onHide () {
    let self = this;
    // 初始化 多媒体
    self.initMultimedia()
  },
  // 滚动界面
  onPageScroll (res) {
    let self = this;

    // console.log(res, '.........滚动界面')
    // wx.pageScrollTo({
    //   scrollTop: 0,
    //   duration: 50
    // })


    // if(self.courseData){
    //   // 帖子 多媒体
    //   if (self.courseData.section_content) {
    //     self.courseData.section_content.forEach((itemCourse, indexCourse) => {
    //       if (itemCourse.status === 3) {
    //         itemCourse.play = 0
    //       }
    //     })
    //   }
    // } 
  },
  // 页面加载
  onLoad () {
    // 页面加载前 清除缓存
    let self = this;
    self.courseData = [];
    // 显示评论
    self.showComment = false;
    // 评论数据
    self.commentData = [];
  },
  // 页面显示
  onShow () {
    // 页面显示前 清除缓存
    let self = this;
    self.courseData = [];
    // 显示评论
    self.showComment = false;
    // 评论数据
    self.commentData = [];
  },
  // // 分享
  // onShareAppMessage (res) {
  //   let self = this;
  //   // 分享 数据
  //     // self.shareData = item
  //   console.log(res, self.shareData, '...........分享......')
  //   // 显示 分享model
  //   if (self.showShareModel) {
  //     if (res.from === 'button') {
  //       // 来自页面内转发按钮
  //       console.log(res.target)
  //     }
  //     return {
  //       title: self.shareData.nickName+' 的作业日记',
  //       imageUrl: self.shareData.avatarUrl,
  //       path: '/pages/taskParticulars/main?task_state=2&job_id='+self.shareData.job_id
  //     }
  //   }
  // }
}
</script>

<style>
page{
    width: 100%;
    height: 100%;
}
</style>
<style lang="less" scoped>
.courseParticulars{
    width: 100%;
    background: #ffffff;
    .courseTopic{
      margin: 0 32rpx;
      .topicHeader{
        .topicTitle{
          font-family: PingFangSC-Medium;
          font-size: 46rpx;
          color: #333333;
          letter-spacing: 0.96rpx;
          margin-bottom: 30rpx;
        }
        .topTime{
          height: 40rpx;
          line-height: 40rpx;
          font-family: PingFangSC-Regular;
          font-size: 28rpx;
          color: #999999;
          margin-bottom: 32rpx;
        }
      }
      .topicContent{
        .topicCell{
          .cellText{
            width: 100%;
            margin-bottom: 50rpx;
            line-height: 50rpx;
            margin-top: -11rpx;
            text-align: justify;
            letter-spacing: 3.21rpx;
            .textTitle{
              font-family: PingFangSC-Regular;
              font-size: 30rpx;
              color: #333333;
              width: 100%;
            }
            .textContent{
              font-family: PingFangSC-Regular;
              font-size: 30rpx;
              color: #333333;
              width: 100%;
            }
          }

          .cellImage{
            width: 100%;
            margin-bottom: 40rpx;
            letter-spacing: 3rpx;
            .imageTitle{
              width: 100%;
              line-height: 1;
              font-family: PingFangSC-Regular;
              font-size: 30rpx;
              color: #333333;
              margin-bottom: 40rpx;
            }
            .imageContent{
              width: 100%;
              img{
                width: 100%;
              }
            }
          }

          .cellAudio{
            width: 100%;
            margin-bottom: 40rpx;
            letter-spacing: 3rpx;
            .audioTitle{
              width: 100%;
              line-height: 1;
              font-family: PingFangSC-Regular;
              font-size: 30rpx;
              color: #333333;
              margin-bottom: 40rpx;
            }
            .audioContent{
              width: 100%;
              text-align: center;
              audio{
                width: 100%;
              }
            }
          }

          .cellVideo{
            margin-bottom: 50rpx;
            .videoTitle{
              width: 100%;
              line-height: 1;
              font-family: PingFangSC-Regular;
              font-size: 30rpx;
              color: #333333;
              margin-bottom: 40rpx;
            }
            .videoContent{
              width: 100%;
              height: 360rpx;
              video{
                width: 100%;
                height: 360rpx;
              }
            }
          }

          .cellTask{
            width: 100%;
            margin-bottom: 70rpx;
            margin-top: -11rpx;
            line-height: 50rpx;
            text-align: justify;
            letter-spacing: 3rpx;
            .taskTitle{
              font-family: PingFangSC-Regular;
              font-size: 28rpx;
              color: #333333;
              width: 100%;
            }
            .taskContent{
              font-family: PingFangSC-Regular;
              font-size: 28rpx;
              color: #333333;
              width: 100%;
            }
          }

        }
      }
    }

    .courseComment{
      // margin: 0 32rpx;
      margin-top: -25rpx;
    }
    .courseLoading{
      width:100%;
      text-align:center;
      font-family:PingFangSC-Regular;
      font-size:26rpx;
      color:#999999;
      letter-spacing:0.7rpx;
      line-height:1;
      margin-top:13rpx;
      padding-bottom:30rpx;
    }

    // .commentVideo{
    //   position: fixed;
    //   left: 0;
    //   right: 0;
    //   top: 0;
    //   bottom: 0;
    //   overflow: hidden;
    //   z-index: 999999999999;
    //   .videoMask{
    //     position: fixed;
    //     left: 0;
    //     right: 0;
    //     top: 0;
    //     bottom: 0;
    //     background: #000;
    //     // opacity: 0.93;
    //   }
    //   .videoBox{
    //     position: fixed;
    //     top: 50%;
    //     margin-top: -180rpx;
    //     width: 100%;
    //     height: 360rpx; 
    //     video{
    //       width: 100%;
    //       height: 360rpx;
    //     }
    //   }
    // }
    // .shareModel{
    //   position: fixed;
    //   left: 0;
    //   right: 0;
    //   top: 0;
    //   bottom: 0;
    //   overflow: hidden;
    //   z-index: 999999999999;
    //   .shareMask{
    //     position: fixed;
    //     left: 0;
    //     right: 0;
    //     top: 0;
    //     bottom: 0;
    //     background: #000;
    //     opacity: 0.7;
    //   }
    //   .shareContent{
    //     position: fixed;
    //     top: 50%;
    //     margin-top: -180rpx;
    //     width: 100%;
    //     height: 360rpx;
    //     background: #ee3a29;
    //     button {
    //       display: inline-block;
    //       vertical-align: middle;
    //       width: 180rpx;
    //       height: 180rpx;
    //       line-height: 180rpx;
    //       border-radius: 50%;
    //       overflow: hidden;
          
    //       .shareFriend{
    //         width: 180rpx;
    //         height: 180rpx;
    //       }

    //     } 
    //   }
    // }
}
</style>
